<template>
  <view class="goods-list flex-between">
    <view
      class="goods-item"
      v-for="(item, index) in list"
      :key="index"
      @click="toProduct(item)">
      <view class="poster-box">
        <image class="poster" :src="item.thumb" mode="aspectFill"></image>
      </view>

      <view class="info-box">
        <view class="title-box">
          <view class="title ellipsis-2">
            {{ item.title }}
          </view>
        </view>
        <view class="price flex">
          <text class="huobi">￥</text>
          <text class="price-val">{{ item.priceSale || 0 }}</text>
        </view>
        <view class="b-wrap flex">
          <image src="/static/demo.jpg" mode="aspectFit"></image>
          <view class="b-wrap-t">11111111</view>
          <view class="b-wrap-t1">美术老师</view>
        </view>
        <!-- <view class="price-box flex-between"> -->

        <!-- 	<view class="price-line">
						市价￥{{item.priceMarket || 0}}
					</view> -->
        <!-- <view class="sale">
						{{item.orders || 0}}人付款
					</view> -->
        <!-- 	<view class="add-box" @click.stop="do_open_sku(item)">
						<image src="@/static/common/add.png"></image>
					</view> -->
        <!-- </view> -->
      </view>
    </view>

    <product_sku_pop ref="product_sku_pop" @confirm="confirmGuige" />
  </view>
</template>

<script>
import product_sku_pop from "@/components/product/product_sku_pop.vue";

export default {
  name: "goods",
  components: {
    product_sku_pop,
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tag: {
      type: String,
      default: "通用", // 通用  特价 秒杀
    },
    position: {
      type: String,
      default: "", // 我的收藏
    },
  },
  data() {
    return {
      demoList: [],
    };
  },
  created() {
    this.setView();
  },
  methods: {
    setView() {},
    toProduct(item) {
      this.toRoute({
        path: "/product-detail",
        query: {
          id: item.inventoryId,
          flash_time: item.cuxiao_time,
        },
      });
    },

    do_open_sku(item) {
      this.$log("规格", item);

      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_detail",
          inventoryId: item.inventoryId,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$refs.product_sku_pop.init(res.data);
        }
        // this.hideLoading()
      });
    },

    confirmGuige(data) {
      this.$log("confirmGuige", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-list {
  flex-wrap: wrap;

  .goods-item {
    margin-bottom: 24rpx;
    width: 334rpx;
    background: #ffffff;
    border-radius: 8rpx;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);

    .poster-box {
      position: relative;
      width: 334rpx;
      height: 334rpx;

      image {
        width: 334rpx;
        height: 334rpx;
        border-radius: 8rpx 8rpx 0 0;
      }

      .fav-box {
        top: 0rpx;
        left: 0rpx;
        position: absolute;
        z-index: 2;
        width: 80rpx;
        height: 80rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .info-box {
      padding: 18upx 24upx 32upx;

      .title-box {
        // height: 70rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
        margin-bottom: 20upx;
      }

      .desc {
        margin-top: 16rpx;
        height: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16rpx;
        color: #838b9e;
      }
      .price {
        margin-bottom: 20upx;
        .huobi {
          font-weight: 400;
          font-size: 16rpx;
          color: #e23410;
        }

        .price-val {
          font-weight: bold;
          font-size: 24rpx;
          color: #e23410;
        }
      }
      .b-wrap {
        & > image {
          width: 32rpx;
          height: 32rpx;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          border: 2rpx solid #707070;
        }
        &-t {
          font-weight: bold;
          font-size: 24rpx;
          color: #000000;
          margin: 0 16upx;
        }
        &-t1 {
          width: 112rpx;
          height: 32rpx;
          background: #f49c0d;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          text-align: center;
          line-height: 32upx;
          font-size: 20rpx;
          color: #ffffff;
        }
      }
      .price-box {
        margin-top: 16rpx;

        .price-line {
          margin-left: 10rpx;
          flex: 1;
          overflow: hidden;
          text-decoration: line-through;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #7d7d7d;
        }

        .sale {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #9695a3;
        }

        .add-box {
          position: relative;
          width: 32rpx;
          height: 32rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }

          &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 80rpx;
            height: 80rpx;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
}
</style>
